{% load xBlog_filter %}
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">文件</h4>
            </div>
            <div class="modal-body">
                <form id="upload-file-form" enctype="multipart/form-data">
                    <input id="lefile" type="file" name="upload-file" style="display:none">
                </form>
                <div class="input-append input-group">
                    <input id="photoCover" class="input-large form-control" type="text"
                           style="height:30px; width: 450px;border: 1px solid #ccc;">
                    <button class="btn btn btn-primary input-group-addon" onclick="$('input[id=lefile]').click();">
                        浏览
                    </button>
                    <button type="button" class="btn btn-primary input-group-addon" onclick="upload()">上传</button>
                </div>

                <script type="text/javascript">
                    $('input[id=lefile]').change(function () {
                        $('#photoCover').val($(this).val());
                    });
                    function upload() {
                        var formData = new FormData(document.getElementById("upload-file-form"));
                        $.ajax({
                            type: "POST",
                            contentType: false,
                            processData: false,
                            url: "{% url 'upload_file' %}",
                            data: formData,
                            headers: {
                                'X-CSRFToken': csrf_token
                            },
                            success: function (data) {
                                $('#photoCover').val('');
                                var file = $('<a class="list-group-item"><label class="file-name" style="margin-right: 4px;">' + data.filename + '</label><label class="url-label" id="file' + data.file_id + '">' + data.url + '</label><button class="copy-button" style="float: right;"data-clipboard-target="#file' + data.file_id + '"><span class="glyphicon glyphicon-paperclip" title="Copy Url"></span></button></a>')[0];
                                var fileList = $('#file-list')[0];
                                fileList.insertBefore(file, fileList.firstElementChild);
                                alert('上传成功');
                            }
                        });
                    }
                </script>

            </div>
            <div class="modal-footer">
                <div class="selector-available"
                     style="float: left; border: 1px solid #ccc; border-radius: 5px; width: 570px;padding-top: 10px;">
                    <h2 style="text-align: center;">
                        Available Files
                    </h2>
                    <div class="list-group" id="file-list"
                         style="max-height: 250px; overflow: scroll; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;">
                        {% for file in files %}
                            <a class="list-group-item"
                               {% if forloop.counter|mod:2 == 1 %}style="background: #f5f5f5" {% endif %}><label
                                    class="file-name">{{ file.filename }}</label>
                                <label class="url-label" id="file{{ file.file_id }}">{{ file.url }}</label>
                                <button class="copy-button" style="float: right;"
                                        data-clipboard-target="#file{{ file.file_id }}"><span
                                        class="glyphicon glyphicon-paperclip" title="Copy Url"></span></button>
                            </a>
                        {% endfor %}
                    </div>

                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->